<template>
  <div class="dashboard-container">
    <div style="font-weight: bold;font-size: 36px;margin: 20px 0 0 20px;width: 100%;padding: 0;">
      <span>欢迎来到海洋捕捞上报系统</span>
    </div>
    <div style="display: flex;justify-content: space-around;height: 100%;margin-top: 30px;">
      <!--左侧介绍+图片轮转-->
      <div style="display: felx;flex-direction: column;width: 60%;">
        <!-- 跑马灯  -->
        <div>   
            <el-carousel :interval="4000" type="card" height="400px">
                <el-carousel-item v-for="item in imgList" :key="item.id">
                     <img :src="item.idView" alt="image" class="image" style="width: 100%; height: 100%;">
                </el-carousel-item>
            </el-carousel>
        </div>
        <Divider></Divider>
        <div>
          我国是一个海洋大国，东临太平洋，海岸线总长 18000 多千米，渔业资源丰富。经过几代渔人的奋力拼搏，中国渔业从无到有、从小到大、从弱到强，取得了历史性变革和举世
          瞩目的巨大成就；从简单捕捞，技术养殖，科技养殖，到绿色可持续发展养殖，探索出了一
          条产业发展与生态环保相结合、绿色可持续的发展路径；从粗放式发展到资源合理利用，真
          正形成了一个完整的产业体系。
        </div>
      </div>
      <!--右侧两个卡片-->
      <div style="display: felx;flex-direction: column;width: 30%;">
        <div>
          <el-card>
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;">通知公告</span>
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{ '公告 ' + o }}
            </div>
          </el-card>
        </div>
        <div style="margin-top: 20px;">
          <el-card>
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;">最新资讯</span>
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{ '资讯信息 ' + o }}
            </div>
          </el-card>
        </div>
        <div style="margin-top: 20px;">
          <el-card>
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;">相关政策</span>
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{ '政策 ' + o }}
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Divider } from 'element-ui';
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data: function () {
    return {
      imgList: [
                {id:0,idView:require('../../assets/welcome_images/wel1.jpg')},
                {id:1,idView:require('../../assets/welcome_images/wel2.jpg')},
                {id:2,idView:require('../../assets/welcome_images/wel1.jpg')},
                {id:3,idView:require('../../assets/welcome_images/wel2.jpg')}            
            ],
      imgs: [
        { url: require('../../assets/welcome_images/wel1.jpg'), link: 'https://space.bilibili.com/231824541' },
        { url: require('../../assets/welcome_images/wel1.jpg'), link: 'https://blog.csdn.net/weixin_43719616?spm=1001.2101.3001.5343' }
      ]
    }
  },
  methods: {
    linkTo() {
      let activeIndex = this.$refs.carousel.activeIndex
      window.open(this.imgs[activeIndex].link, "_blank")
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  components: { Divider }
}
</script>

<style lang="scss" scoped>
.dashboard-container{
  height: 93vh;
}
</style>
